.image-cropper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(14, 13, 13, 0.8);
}
.main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.content {
  z-index: 109;
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bg_black {
  background: rgba(0, 0, 0, 0.8) !important;
}
.bg_gray {
  background: rgba(0, 0, 0, 0.45);
  transition-duration: 0.35s;
}
.content > .content_top {
  pointer-events: none;
}
.content > .content_middle {
  display: flex;
  height: 200px;
  width: 100%;
}
.content_middle_middle {
  width: 200px;
  box-sizing: border-box;
  position: relative;
  transition-duration: 0.3s;
}
.content_middle_right {
  flex: auto;
}
.content > .content_bottom {
  flex: auto;
}
.image-cropper .img {
  z-index: 102;
  top: 0;
  left: 0;
  position: absolute;
  border: none;
  width: 100%;
  backface-visibility: hidden;
  transform-origin: center;
}
.image-cropper-canvas {
  position: fixed;
  background: white;
  width: 150px;
  height: 150px;
  z-index: 110;
  top: -200%;
  pointer-events: none;
}
.border {
  background: white;
  pointer-events: auto;
  position: absolute;
}
.border-top-left {
  left: -2.5px;
  top: -2.5px;
  height: 2.5px;
  width: 33rpx;
}
.border-top-right {
  right: -2.5px;
  top: -2.5px;
  height: 2.5px;
  width: 33rpx;
}
.border-right-top {
  top: -1px;
  width: 2.5px;
  height: 30rpx;
  right: -2.5px;
}
.border-right-bottom {
  width: 2.5px;
  height: 30rpx;
  right: -2.5px;
  bottom: -1px;
}
.border-bottom-left {
  height: 2.5px;
  width: 33rpx;
  bottom: -2.5px;
  left: -2.5px;
}
.border-bottom-right {
  height: 2.5px;
  width: 33rpx;
  bottom: -2.5px;
  right: -2.5px;
}
.border-left-top {
  top: -1px;
  width: 2.5px;
  height: 30rpx;
  left: -2.5px;
}
.border-left-bottom {
  width: 2.5px;
  height: 30rpx;
  left: -2.5px;
  bottom: -1px;
}
